import React, { Component } from 'react'

export default class App extends Component {

  state = {
    count: 100
  }

  // 该写法将函数提取到外部，但是 this 依旧无法获取
  add = function(){
    console.log('你好世界',this);
    // this.setState({
    //   count: this.state.count + 1
    // })
  }

  // 箭头函数在行内和外部都可以正常使用 this
  addNum = ()=>{
    console.log('你好中国',this);
    this.setState({
      count: this.state.count + 1
    })
  }

  add1 = function(){
    console.log('你好世界',this);
    this.setState({
      count: this.state.count + 10
    })
  }

  render() {
    return (
      <div>
        <h1>App -- {this.state.count}</h1>
        {/* 事件不可以手动加 () 进行调用，如果加了就会导致一运行立即执行，后期的点击无法调用 */}
        {/* <button onClick={this.add()}>点击增加</button> */}
        
        <button onClick={this.add}>点击增加</button>

        <button onClick={this.addNum}>点击增加</button>

        {/* 如果外部使用的是普通函数，那么我们也可以通过修改 this 执向的方式进行使用 */}
        <button onClick={this.add1.bind(this)}>点击增加1</button>
      </div>
    )
  }
}
